<template>
  <div class="directives">
    <h2>自定义指令</h2>
    <br>
    <div class="title">v-focus</div>
    <input type="text" v-model="data" v-focus>
    <br>
    <br>
    <div class="title">v-copy</div>
    <div>{{ data }}</div>
    <button v-copy="data">点击复制到剪切板</button>
  </div>
</template>

<script lang='ts' setup>
const data = ref("")
</script>

<style scoped lang="scss">
.directives {
  padding: 0 30px;
  box-sizing: border-box;
}

.title{
  font-size: 20px;
  margin: 5px auto;
}
</style>